{% extends "channel/base.html" %}
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
    {% block head %}
    <style>
        body{
            margin: 0;
            padding: 0;
        }
        .left{
            width: 30%;
            background-color: red;
        }
        .right{
            width: 30%;
            background-color: #1abc9c;
        }
        .content{
            display: flex;
            justify-content: space-between;
        }
    </style>
    {% endblock head %}
</head>
<body>
    {% block content %}
        <div class="left"></div>
        <div class="content">
            <!--代码部分-->
            <form class="form-horizontal">
                <div class="form-group">
                    <!--样式control-label使内容居右-->
                    <label for="username" class="col-sm-3 control-label">帐号：</label>
                    <div class="col-sm-9">
                        <input type="text" class="form-control" id="username" placeholder="请输入帐号" />
                    </div>
                </div>
                <div class="form-group">
                    <label for="password" class="col-sm-3 control-label">密码：</label>
                    <div class="col-sm-9">
                        <input type="password" class="form-control" id="password" placeholder="请输入密码" />
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-9 col-sm-offset-3">
                        <!--样式checkbox为input[type='checkbox']指定合适的样式，相应的还有input[type='radio']的样式radio-->
                        <div class="checkbox">
                            <label>
                                <input type="checkbox" /> 记住密码
                            </label>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-sm-9 col-sm-offset-3">
                        <button type="submit" class="btn btn-primary btn-sm">登录</button>
                        <a href="#" class="btn btn-link btn-sm">忘记密码？</a>
                    </div>
                </div>
            </form>

        </div>
        <div class="right"></div>
    {% endblock content %}


</body>
</html>